<template>
    <div class="line-detail-wrap">
        <div class="ylt-container">
            <div class="line-detail-banner">
                <div class="back" @click="goBack"><i class="iconfont icon-shangyibu"></i></div>
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- @someSwiperEvent="callback" -->
                    <!-- slides -->
                    <swiper-slide v-for="(item,key) in details.groupLinePictures" :key="key"><img :src="item.path" /></swiper-slide>
                    <!-- Optional controls -->
                </swiper>
                <span class="banner-pageNum" v-cloak>{{banner.activeIndex}}/{{details.groupLinePicturesCount}}</span>
            </div>
            <div class="line-title-info">
                <div class="line-name ylt-text-035" style="margin-bottom: .1rem;">
                    {{details.lineName}}
                </div>
                <div class="line-booking-btn">
                    <div>
                        <span class="ylt-text-price">￥<span class="ylt-text-04">{{details.priceDisplay||'--'}}</span></span> 元
                        <del class="ylt-text-999">￥{{details.outPriceDisplay||'--'}}元</del>
                    </div>
                </div>
            </div>
            <div class="gap-module"></div>
            <yd-cell-group class="line-detailgroup">
                <yd-cell-item arrow>
                    <span slot="left">出发日期(可选)</span>
                    <span slot="right"><input  type="date" v-model="GoDate" @change="handleChangeDate" /></span>
                </yd-cell-item>
                <yd-cell-item arrow>
                    <span slot="left">出发城市(可选)</span>
                    <span slot="right">
                        <select v-model="SourceCityName" @change="handleSearch" id="citySelect">
                            <option v-for="(item,key) in departCityList" :key="key">{{item.sourceCityName}}</option>
                        </select>
                    </span>
                </yd-cell-item>
            </yd-cell-group>
            <div class="gap-module"></div>
            <div class="desc-box">
                <div class="desc-title">
                    产品经理推荐
                </div>
                <div class="desc-content jingdian">
                    <p>{{details.recommendDesc||'无'}}</p>
                </div>
            </div>
            <div class="gap-module"></div>
            <yd-tab>
                <yd-tab-panel label="小项目">
                    <div class="desc-box">
                        <div class="desc-content" v-for="(item,key) in details.groupLineSmallItemPrices" :key="key">
                            <p>{{item.smallItemsName}}:<span class="ylt-text-price">{{item.toPrice||'--'}}</span>元</p>
                        </div>
                        <div class="desc-content" v-show="smallItemLen==0">
                            <p>无</p>
                        </div>
                    </div>
                </yd-tab-panel>
                <yd-tab-panel label="行程说明">
                    <div class="desc-box tour-plan">
                        <div class="desc-content">
                            <div class="tour-item" v-for="(item,key) in details.groupLineRoutes" :key="key">
                                <div class="tour-day">
                                    <div class="day-icon">
                                        <i class="iconfont icon-rili1"></i>
                                    </div>
                                    <div class="day-text">
                                        <span class="title">{{item.routeTitle}}</span><span class="tip">{{item.routeName}}</span>
                                    </div>
                                </div>
                                <div class="tour-content">
                                    <div class="content-desc">
                                        <span v-html="item.tickets"></span>
                                    </div>
                                    <div class="content-item">
                                        <div class="item-title">
                                            <i class="iconfont icon-zhishipai"></i> 交通
                                        </div>
                                        <div class="item-desc">
                                            <p>{{item.trafficArrStr||'无'}}</p>
                                        </div>
                                    </div>
                                    <div class="content-item">
                                        <div class="item-title">
                                            <i class="iconfont icon-jiudian4"></i> 酒店
                                        </div>
                                        <div class="item-desc">
                                            <p>{{item.hotels||'无'}}</p>
                                        </div>
                                    </div>
                                    <div class="content-item">
                                        <div class="item-title">
                                            <i class="iconfont icon-canyin-copy"></i> 餐饮
                                        </div>
                                        <div class="item-desc">
                                            <p>{{item.mealInfoStr||'无'}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </yd-tab-panel>
                <yd-tab-panel label="预订说明">
                    <div class="desc-box">
                        <div class="desc-content">
                            <p v-html="groupLineBookingDesc||'无'"></p>
                        </div>
                    </div>
                </yd-tab-panel>
            </yd-tab>
        </div>
        
    </div>
    
    
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'index',
    components: {
        swiper,
        swiperSlide
    },
    data () {
        let _ths=this;
        return {
            banner: {
                total: 0,
                activeIndex: 0,
            },
            swiperOption:{
                direction: 'horizontal',
				loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction:false,
                },
                setWrapperSize :true,
                on: {
                    init(){
                        _ths.banner.activeIndex = this.activeIndex+1
                    },
                    slideChangeTransitionStart(){
                        _ths.banner.activeIndex = this.activeIndex+1
                    },
                },
            },
            swiperList:[],
            details:{},
            GoDate:'',
            SourceCityName:'',
            params:{
    			BranchId:this.$route.query.BranchId,
                EnumGroupLineType:this.$route.query.EnumGroupLineType,
                LineId:this.$route.query.LineId,
                TargetCityName:this.$route.query.TargetCityName||'',
            },
            trafficList:{
                '1':'大巴',
                '2':'火车',
                '4':'高铁',
                '8':'动车',
                '16':'飞机',
                '32':'自备车',
                '64':'渡船'
            },
            mealList:{
                '1':'早餐',
                '2':'午餐',
                '4':'晚餐'
            },
            groupLineBookingDesc:'',
            smallItemLen:0,
            kefuList:[],
            departCityList:[]
        }
    },
    mounted() {
        this.querData();
        this.getDepartCity();
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        querData:function(num){
            let _this=this;
            this.$dialog.loading.open();
            this.http.get('/GroupLine/GetGroupLineDetailH5?BranchId='+this.params.BranchId+'&EnumGroupLineType='+this.params.EnumGroupLineType+'&LineId='+this.params.LineId+'&TargetCityName='+this.params.TargetCityName+'&SourceCityName='+this.SourceCityName)
            .then(res=>{
                if(res.data.isSuccess){
                    this.details=res.data.objects[0];
                    this.GoDate=this.details.goDate.split('T')[0];
                    this.SourceCityName=this.details.sourceCityName;
                    if(this.details.groupLineBookingDescs.length>0){
                        this.groupLineBookingDesc=this.details.groupLineBookingDescs[0].bookingDesc;
                    }
                    this.smallItemLen=this.details.groupLineSmallItemPrices.length;
                    this.details.groupLineRoutes.forEach(function(item){
                        item.mealInfoStr=''
                        item.trafficArrStr=''
                        if(item.returnMealInfo !=null){
                            var mealArr = item.returnMealInfo.split(',')
                            mealArr.splice(mealArr.indexOf(''),1)
                            mealArr.forEach(function(item1,index){
                                if(index>0){
                                    item.mealInfoStr += (' '+_this.mealList[item1])
                                }else{
                                    item.mealInfoStr += _this.mealList[item1]
                                }
                                
                            })
                            
                        }else{
                            item.mealInfoStr='无';
                        }
                        if(item.returnTraffic !=null){
                            let trafficArr = item.returnTraffic.split(',')
                            trafficArr.splice(trafficArr.indexOf(''),1)
                            trafficArr.forEach(function(item1,index){
                                if(index>0){
                                    item.trafficArrStr += (' '+_this.trafficList[item1])
                                }else{
                                    item.trafficArrStr += _this.trafficList[item1]
                                }
                            })
                        }else{
                            item.trafficArrStr='无';
                        }
                    })
                }else{
                    this.$dialog.toast({mes:resdata.message, icon:'none',timeout: 2000});
                }
                this.$dialog.loading.close();
            })
        },
        handleSearch(){
            this.querData()
        },
        handleChangeDate(){
            this.querData()
            this.getDepartCity();
        },
        getDepartCity(){
            this.http("/GroupLine/GetSourceCityH5?GoDate="+this.GoDate+"&LineId="+this.params.LineId)
            .then(res=>{
                if(res.data.isSuccess){
                    this.departCityList=res.data.objects;
                }else{
                    this.$dialog.toast({mes:res.data.message, icon:'none', timeout:2000});
                }
            })
        }
    }
}
</script>
<style scoped>
    @import 'swiper/dist/css/swiper.css';
    
</style>